<link rel="stylesheet" type="text/css" media="screen" href="css/dock/layout2.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/dock/dock-example2.css">
<script type="text/javascript" src="js/dock/jquery.jqDock.min.js"></script>
<script type="text/javascript">
	$(function() {
		var jqDockOpts = {
			align : 'left',
			duration : 200,
			labels : 'tc',
			size : 48,
			distance : 85
		};
		$('#jqDock').jqDock(jqDockOpts);

		// $('.dockcontainer').fixedMenu();

		// $(".dockitem").fancybox();
		$('#drawFloor').click(function() {

			$('canvas').bind('mousemove', function(event) {build.moveArea(event)
			});
			$('canvas').bind('mousedown', function(event) {build.startArea(event)
			});
			$('canvas').bind('mouseup', function(event) {build.endArea(event)
			});
			return false;
		});
		$('#createHouse').click(function() {

			var walls = build.calcWalls();
			scene = new THREE.Scene;
			build.setScene(scene);
			gone2Facade = true;
			
			camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 100000);
			// camera = new THREE.CombinedCamera( window.innerWidth, window.innerHeight, 45, 1, 10000, -2000, 10000 );
			camera.orgPosition = new THREE.Vector3(0, 100, 500);
			camera.position.y = 300;
			camera.position.z = 1300;
			controls = new THREE.FirstPersonControls(camera);
			controls.lookSpeed = 0.0125;
			controls.movementSpeed = 500;
			controls.noFly = false;
			controls.lookVertical = true;
			controls.constrainVertical = false;
			controls.freeze = false;

			scene.add(camera);
			build.gotoFacade(walls);

			$('canvas').unbind('mousemove');
			$('canvas').unbind('mousedown');
			$('canvas').unbind('mouseup');
			return false;
		});
		$('#wander').click(function() {
			controls.freeze = false;
			return false;
		})
	});

</script>
<div id="dockContainer">
	<ul id="jqDock">
		<!--       <li><?php echo CHtml::link(CHtml::image(Yii::app()->baseUrl."/images/dock/portfolio.png"),
		array('class'=>"dockitem",'alt'=>'', 'title'=>'profolio'))?></li>
		<li><?php echo CHtml::link(CHtml::image(Yii::app()->baseUrl."/images/dock/video-sm.png"),
		array('webgl/drawHouseStyle/'),array('class'=>"dockitem",'alt'=>'Portfolio', 'title'=>'编写'))?></li>
		<li><?php echo CHtml::link(CHtml::image(Yii::app()->baseUrl."/images/dock/history-sm.png"),
		array('webgl/showHouseStyle/'),array('class'=>"dockitem",'alt'=>'Portfolio', 'title'=>'导入'))?></li>
		<li><a id='save' class="dockitem" alt="Portfolio" title="保存" href="#"><img src="images/dock/video.png" /></li>
		<li><?php echo CHtml::link(CHtml::image(Yii::app()->baseUrl."/images/dock/video-sm.png"),
		array('webgl/showHouse/'),array('class'=>"dockitem",'alt'=>'Portfolio', 'title'=>'搜索家'))?></li> -->
		<li>
			<a id='drawFloor' class="dockItem" href="" alt='', title='绘制户型'><?php echo CHtml::image(Yii::app()->baseUrl."/images/dock/history-sm.png")
			?></a>
		</li>
		<li>
			<a id='createHouse'class="dockItem" href="" alt='', title='生成户型'><?php echo CHtml::image(Yii::app()->baseUrl."/images/dock/history-sm.png")
			?></a>
		</li>
		<li>
			<a id='wander'class="dockItem" href="" alt='', title='屋中漫步'><?php echo CHtml::image(Yii::app()->baseUrl."/images/dock/history-sm.png")
			?></a>
		</li>
		<!-- 	  <li><?php echo CHtml::link(CHtml::image(Yii::app()->baseUrl."/images/dock/history-sm.png"),
		array('webgl/saveHouse/'),array( 'class'=>"dockitem",'alt'=>'Portfolio', 'title'=>'保存'))?></li> -->
		<!--
		<li><a class="dockItem" href="index.html"><img src="images/dock/home-sm.png" alt="Home" title="Example&nbsp;1" /></a></li>
		<li><a class="dockItem" href="example2.html"><img src="images/dock/email-sm.png" alt="Contact" title="Example&nbsp;2" /></a></li>
		<li><a class="dockItem" href="example3.html"><img src="images/dock/portfolio-sm.png" alt="portfolio" title="Example&nbsp;3" /></a></li>
		<li><a class="dockItem" href="all-examples.html"><img src="images/dock/music-sm.png" alt="music" title="All&nbsp;Examples" /></a></li>
		<li><a class="dockItem" href="#"><img src="images/dock/video-sm.png" alt="video" title="Video" /></a></li>
		<li><a class="dockItem" href="#"><img src="images/dock/history-sm.png" alt="history" title="History" /></a></li>
		<li><a class="dockItem" href="#"><img src="images/dock/calendar-sm.png" alt="calendar" title="Calendar" /></a></li>
		<li><a class="dockItem" href="#"><img src="images/dock/link-sm.png" alt="links" title="Links" /></a></li>
		<li><a class="dockItem" href="#"><img src="images/dock/rss-sm.png" alt="rss" title="RSS" /></a></li>
		<li><a class="dockItem" href="#"><img src="images/dock/rss2-sm.png" alt="rss" title="RSS" /></a></li>
		-->
	</ul>
</div>